{% extends 'layout/base.twig' %}

{% block title %}
- Callgraph - {{ profile.meta.url }} - {{ profile.meta('SERVER.REQUEST_TIME')|date(date_format) }}
{% endblock %}

{% block content %}
<h1>Callgraph for {{ profile.meta.url }} on {{ profile.meta('SERVER.REQUEST_TIME')|date(date_format) }}</h1>

<div class="row-fluid">
    <div class="pull-right relative-box">
        <a href="#" id="customize-graph" class="btn btn-default btn-small">
            Update
        </a>
        <div class="popover left" id="metric-popover">
            <div class="arrow"></div>
            <div class="popover-content">
                <h4>Metric</h4>
                <div class="control-group">
                    <select name="metric">
                        <option value="ct">Call count</option>
                        <option value="wt" selected="selected">Wall time</option>
                        <option value="cpu">CPU time</option>
                        <option value="mu">Memory use</option>
                        <option value="ewt">Self wall time</option>
                        <option value="ecpu">Self CPU</option>
                        <option value="emu">Self memory use</option>
                        <option value="epmu">Self peak memory use</option>
                    </select>
                </div>
                <div class="control-group">
                    <label>
                        Threshold
                        <input type="number" name="threshold" value="0.01" step="0.001">
                    </label>
                </div>
                <div class="btn-group">
                    <button class="btn btn-primary">Apply</button>
                </div>
            </div>
        </div>
    </div>

    <p class="alert alert-info pull-left">
        Methods that represent <span id="threshold-display"></span>% or less of the entire execution will be omitted
    from the callgraph result.</p>

</div>


<div class="row-fluid">
    <div id="loading">Loading..</div>
    <div class="chart-container" id="callgraph-image">
    </div>

    <div id="callgraph-details">
        <span class="button-close pull-right">&#10799;</span>
        <div class="details-content">
        </div>
    </div>


    <p>Due to the limitations in how xhprof collects data, callgraphs are not 100% reflective of
the actual method callgraph.</p>
</div>
{% endblock %}

{% block jsfoot %}
<script src="{{ static('js/dagre-d3.js') }}"></script>
<script src="{{ static('js/callgraph.js') }}"></script>
<script>
$(document).ready(function () {
    var loading = $('#loading');
    var gear = $('#customize-graph');
    var select = $('select[name=metric]');
    var popover = $('#metric-popover');
    var threshold = $('input[name=threshold]');
    var thresholdDisplay = $('#threshold-display');
    var ok = popover.find('.btn');

    gear.on('click', function(e) {
        popover.toggle();
        var width = gear.outerWidth();
        var height = popover.height();
        var buttonPosition = gear.position();
        popover.css({
            right: width + 5,
            top: 10 + (height / 2) * -1
        });
        return false;
    });

    ok.on('click', function(e) {
        var metric = select.val();
        var thresh = threshold.val();
        popover.hide();
        loadCallgraph(metric, thresh);
        return false;
    });

    loadCallgraph('wt', 0.01);
});

function updateThreshold(value) {
    var display = $('#threshold-display');
    display.text(parseFloat(value) * 100);
}

function loadCallgraph(metric, threshold) {
    var url = "{{ url('run.callgraph.data', {'id': profile.id|trim}) }}";
    var baseUrl = "{{ url('run.symbol', {'id': profile.id|trim }) }}";
    var shortUrl = "{{ url('run.symbol-short', {'id': profile.id|trim }) }}";

    var params = {
        metric: metric,
        threshold: threshold
    };
    $.getJSON(url + '&' + $.param(params), function (data) {
        $('#callgraph-image').empty();
        $('#loading').hide();

        updateThreshold(threshold);

        Xhgui.callgraph('#callgraph-image', data, {
            baseUrl: baseUrl,
            shortUrl: shortUrl,
            detailView: '#callgraph-details',
            threshold: threshold,
            metric: metric
        });
    });
}
</script>
{% endblock %}
